import React, {createRef} from "react"
import './index.scss'
import ContentView from '../../components/ContentView'
import ScrollContent from "../../components/ScrollContent"
import Block from '../../components/Wrapper/Block'
import {feedback} from '../../http/api'
import {Toast} from 'antd-mobile'
export default class Feedback extends React.Component{
        constructor (props) {
                super (props);
                this.contactRef = createRef()
                this.contentRef = createRef()
        }
        handleOnSubmit = ()=>{
                const [feedBackContent,contactPhone] = [this.contentRef.current.value,this.contactRef.current.value]
                if (!feedBackContent) {
                        Toast.fail('请输入反馈信息')
                        return
                }
                const mailTest = /^[a-z0-9](\w|\.|-)*@([a-z0-9]+-?[a-z0-9]+\.){1,3}[a-z]{2,4}$/i.test (contactPhone)
                const phoneTest = /^1[3456789]\d{9}$/.test (contactPhone)
                if (contactPhone&&!(mailTest||phoneTest)) {
                        Toast.fail('邮箱或手机号格式错误')
                        return
                }
                feedback({feedBackContent,contactPhone}).then(()=>{
                        Toast.success('提交成功')
                        this.contentRef.current.value = ''
                        this.contactRef.current.value = ''
                })
        }
        render () {
                return <ContentView title='问题反馈' className='feedback'>
                        <ScrollContent>
                                <Block>
                                        <div className="block-title">问题/意见描述</div>
                                        <div className="block-input-content">
                                                <textarea  ref={this.contentRef} rows="10" placeholder='请填写意见或者建议，以便我们更好的为您解决问题'/>
                                        </div>
                                </Block>
                                <Block>
                                        <div className="block-title">联系方式（选填）</div>
                                        <div className="block-input-content">
                                                <input ref={this.contactRef } type="text" placeholder='请填写手机号或邮箱，以便我们与您联系'/>
                                        </div>
                                </Block>
                                <div className="btn-wrapper">
                                        <div className="btn" onClick={this.handleOnSubmit}>提交</div>
                                </div>
                        </ScrollContent>
                </ContentView>
        }

}
